<template>
  <div>
    <jy-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="72px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="工序" prop="name">
              <el-input v-model="form.name" placeholder="请输入名称" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="期数" prop="qsId">
              <el-select v-model="form.qsId" placeholder="" @change="qsChange" style="width: 100%;">
                <el-option v-for="item in qsOptions" :key="item.qsId" :label="item.settleName"
                  :value="item.qsId"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="报验时间" prop="inspectTime">
              <el-date-picker clearable v-model="form.inspectTime" type="date" value-format="yyyy-MM-dd"
                placeholder="请选择日期" style="width: 100%;">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="cd-ml8 cd-mb8 cd-text-md text-bold">需上传的资料列表</div>
        <el-table class="cd-mb8" border stripe v-loading="loading" :data="form.infoList">
          <el-table-column label="序号" align="center" width="50px" type="index" />
          <el-table-column label="资料名称" align="center" property="name" min-width="140" show-overflow-tooltip />
          <el-table-column label="文件" header-align="center" property="fileName" min-width="220" show-overflow-tooltip>
            <template slot-scope="scope">
              <div class="file-border pointer theme-color" v-for="(item, index) in scope.row.sysOssVos" :key="index"
                @click="previewFile(item)">
                <span class="el-icon-document cd-mr4"></span>
                <span class="pointer theme-color">{{ item.originalName }}{{ item.originalName }}{{ item.originalName
                  }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="上传时间" align="center" property="updateTime" width="120" show-overflow-tooltip>
            <template slot-scope="scope">
              {{ parseTime(scope.row.updateTime, '{y}-{m}-{d}') }}
            </template>
          </el-table-column>
          <el-table-column label="上传人" align="center" property="updateBy" width="120" show-overflow-tooltip />
          <el-table-column label="操作" width="80" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button size="mini" type="text" @click="onListUpLoad(scope.$index)">上传</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-form-item label="附件" prop="fileNo">
          <fileUpload v-model="form.fileNo" :oldList="form.fileNoOld" :fileType="['doc', 'docx', 'xlsx', 'xls'
            , 'pdf', 'png', 'jpg', 'jpeg']" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input type="textarea" v-model="form.remark" placeholder="请输入备注" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </jy-dialog>
    <file-upload-model-view ref="fileUploadModelViewRef" @callBack="setFile" />
  </div>
</template>
<script>
import { getBsProcessInspection, updateBsProcessInspection } from "@/api/pl/bsProcessInspection";
import { queryQsList } from "@/api/cm/bsQs";
import FileUploadModelView from '@/components/FileUpload/FileUploadModelView.vue';

export default {
  name: 'gxby-add-or-update',
  components: {
    FileUploadModelView,
  },
  data () {
    return {
      open: false,
      title: '工序报验资料管理',
      loading: false,
      buttonLoading: false,
      qsOptions: [],
      form: {},
      rules: {
        qsId: [
          { required: true, message: "对应期数不能为空", trigger: "blur" }
        ],
        inspectTime: [
          { required: true, message: "报验时间不能为空", trigger: "blur" }
        ],
      }
    };
  },
  created () {
  },
  mounted () {
  },
  methods: {
    init (id) {
      this.reset();
      this.open = true;
      this.form.id = id;
      this.getInfo();
    },
    getInfo () {
      this.loading = true;
      getBsProcessInspection(this.form.id).then(response => {
        this.loading = false;
        this.form = response.data;
        if (this.form.fileNo) {
          this.form.fileNoOld = this.form.fileNo.split(',');
        }
        if (this.form.infoList && this.form.infoList.length > 0) {
          this.form.infoList.forEach(item => {
            if (item.fileNo) {
              item.fileNoOld = item.fileNo.split(',');
            }
          });
        }

        this.getQs();
      });
    },
    // 获取期数下拉
    getQs () {
      const queryParams = {
        zdId: this.form.zdId,
      };
      queryQsList(queryParams).then(response => {
        this.qsOptions = response.data;
      });
    },
    qsChange () {
      const info = this.qsOptions.find(item => item.qsId == this.form.qsId);
      this.form.qs = info.settleIndex;
    },
    // 取消按钮
    cancel () {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset () {
      this.form = {
        approveStatus: undefined,
        enabled: undefined,
        fbfxId: undefined,
        fileType: undefined,
        id: undefined,
        infoList: [],
        inspectTime: undefined,
        name: undefined,
        processId: undefined,
        qs: undefined,
        qsId: undefined,
        remark: undefined,
        sort: undefined,
        zdId: undefined,
        fileNo: undefined,
        fileNos: [],
        fileNoOld: [],
      };
      this.dataList = [];
      this.selectedData = [];
    },
    onListUpLoad (index) {
      const info = this.form.infoList[index];
      this.$refs.fileUploadModelViewRef.init(index, info.fileNo, info.fileNoOld);
    },
    setFile (index, fileId) {
      this.form.infoList[index].fileNo = fileId;
    },
    // 下载
    async download (row) {
      this.$download.oss(row.ossId);
    },
    /** 提交按钮 */
    submitForm () {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.form.infoList.forEach(item => {
            if (item.fileNo) {
              item.fileNos = item.fileNo.split(',');
            }
          });
          if (this.form.fileNo) {
            this.form.fileNos = this.form.fileNo.split(',');
          }
          this.buttonLoading = true;
          updateBsProcessInspection(this.form).then(response => {
            this.$modal.msgSuccess("保存成功");
            this.cancel();
            this.$emit('callBack');
          }).finally(() => {
            this.buttonLoading = false;
          });
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.file-border {
  font-size: 14px;
  width: 100%;
  overflow: hidden;
  /* 隐藏超出的内容 */
  white-space: nowrap;
  /* 不换行 */
  text-overflow: ellipsis;
}
</style>
